import { ReactElement, useRef, useEffect, useContext, useState, RefObject } from 'react'
import { Modal, Form, Select, FormInstance, Row, Col } from 'antd'
import { Context } from '../../../../context'
import { SimpleObjSchema, getArbitratorListRequest } from './ajax'
import { awaitWrap } from '@src/assets/js/tool'

const { Item } = Form
const { Option } = Select

async function initData (setOptions: (v: SimpleObjSchema[]) => void): Promise<void> {
  const [e, d] = await awaitWrap(getArbitratorListRequest())
  if (e === null && d instanceof Array) {
    setOptions(d)
  }
}

// 改变仲裁员名称
function changeArbitratorName (name: string, fromRef: RefObject<FormInstance>, options: SimpleObjSchema[], key: string): void {
  const c = fromRef.current
  const o = options.find(li => li.name === name)
  if (c !== null) {
    if (o !== undefined) {
      c.setFieldsValue({ [key]: o.id })
    } else {
      c.setFieldsValue({ [key]: undefined })
    }
  }
}

function submitHandle (d: { [k: string]: any }, callback: (v: any) => void): void {
  if (d.arbitrator === undefined) {
    d.arbitrator = null
    d.arbitratorid = null
    d.arbitrator_assigntype = null
  }
  if (d.arbitrator1 === undefined) {
    d.arbitrator1 = null
    d.arbitratorid1 = null
    d.arbitrator1_assigntype = null
  }
  if (d.arbitrator2 === undefined) {
    d.arbitrator2 = null
    d.arbitratorid2 = null
    d.arbitrator2_assigntype = null
  }
  callback(d)
}

interface Props {
  visible: boolean
  hide: () => void
}

function Main ({ visible, hide }: Props): ReactElement {
  const { updateCaseDetail, caseDetail } = useContext(Context)
  const formRef = useRef<FormInstance>(null)
  const [options, setOptions] = useState<SimpleObjSchema[]>([])
  useEffect(() => {
    initData(setOptions).catch(e => console.error(e))
  }, [])
  useEffect(() => {
    const c = formRef.current
    if (visible && caseDetail !== null && c !== null) {
      c.setFieldsValue({
        arbitrator: caseDetail.arbitrator,
        arbitratorid: caseDetail.arbitratorid,
        arbitrator_assigntype: caseDetail.arbitrator_assigntype,
        arbitrator1: caseDetail.arbitrator1,
        arbitratorid1: caseDetail.arbitratorid1,
        arbitrator1_assigntype: caseDetail.arbitrator1_assigntype,
        arbitrator2: caseDetail.arbitrator2,
        arbitratorid2: caseDetail.arbitratorid2,
        arbitrator2_assigntype: caseDetail.arbitrator2_assigntype
      })
    } else if (!visible && c !== null) {
      c.resetFields()
    }
  }, [caseDetail, formRef, visible])
  return (
    <Modal title='选择仲裁员' visible={visible} onOk={() => formRef.current?.submit()} onCancel={hide} maskClosable>
      <Form ref={formRef} labelCol={{ flex: '128px' }} onFinish={d => { submitHandle(d, updateCaseDetail) }}>
        <Item label='首席/独任仲裁员'>
          <Row gutter={12}>
            <Col span={12}>
              <Item name='arbitratorid' noStyle><span /></Item>
              <Item name='arbitrator' noStyle>
                <Select placeholder='请选择' allowClear showSearch onChange={(id: string) => changeArbitratorName(id, formRef, options, 'arbitratorid')}>
                  {
                    options.map(li => <Option key={li.id} value={li.name}>{li.name}</Option>)
                  }
                </Select>
              </Item>
            </Col>
            <Col span={12}>
              <Item name='arbitrator_assigntype' noStyle>
                <Select placeholder='请选择' allowClear>
                  <Option value='选定'>选定</Option>
                  <Option value='指定'>指定</Option>
                  <Option value='共同委托指定'>共同委托指定</Option>
                </Select>
              </Item>
            </Col>
          </Row>
        </Item>
        <Item label='边裁一'>
              <Row gutter={12}>
                <Col span={12}>
                  <Item name='arbitratorid1' noStyle><span /></Item>
                  <Item name='arbitrator1' noStyle>
                    <Select placeholder='请选择' allowClear showSearch onChange={(id: string) => changeArbitratorName(id, formRef, options, 'arbitratorid1')}>
                      {
                        options.map(li => <Option key={li.id} value={li.name}>{li.name}</Option>)
                      }
                    </Select>
                  </Item>
                </Col>
                <Col span={12}>
                  <Item name='arbitrator1_assigntype' noStyle>
                    <Select placeholder='请选择' allowClear>
                      <Option value='选定'>选定</Option>
                      <Option value='指定'>指定</Option>
                      <Option value='共同委托指定'>共同委托指定</Option>
                    </Select>
                  </Item>
                </Col>
              </Row>
            </Item>
            <Item label='边裁二'>
              <Row gutter={12}>
                <Col span={12}>
                  <Item name='arbitratorid2' noStyle><span /></Item>
                  <Item name='arbitrator2' noStyle>
                    <Select placeholder='请选择' allowClear showSearch onChange={(id: string) => changeArbitratorName(id, formRef, options, 'arbitratorid2')}>
                      {
                        options.map(li => <Option key={li.id} value={li.name}>{li.name}</Option>)
                      }
                    </Select>
                  </Item>
                </Col>
                <Col span={12}>
                  <Item name='arbitrator2_assigntype' noStyle>
                    <Select placeholder='请选择' allowClear>
                      <Option value='选定'>选定</Option>
                      <Option value='指定'>指定</Option>
                      <Option value='共同委托指定'>共同委托指定</Option>
                    </Select>
                  </Item>
                </Col>
              </Row>
            </Item>
      </Form>
    </Modal>
  )
}

export default Main
